<template>
    <div>
        <h2>promise</h2>
        <div>
            <strong>*用来干什么？</strong>  支持链式调用，解决回调地狱问题。<br>
            <strong>*什么是回调地狱？</strong>   回调地狱即嵌套调用，外部函数的执行结果作为内部函数回调执行的条件。<br>
            <strong>*回调地狱的缺点？</strong>    不方便阅读，不方便处理异常。<br>
            <strong>*回调地狱的解决方案？</strong>  promise链式调用、
        </div>
        <hr>
        <div>
            <!-- 第一个例子：fs文件流的 jsStudy中 -->
            <button @click="promise_chouJiang()" class="btn" id="btn">抽奖</button>
        </div>
        <hr>
        <div>
            <h2>promise封装AJAX操作</h2>
            <button class="btn2" id="btn2" @click="sendAjax()">点击发送ajax请求</button><br><p></p>
            <button class="btn3" id="btn3" @click="sendAjax_promise()">点击发送ajax请求(promise封装)</button>
        </div>
        <hr>
        <div class="promise_div">
            <h2>理论知识</h2>
            <h3>##promise的状态</h3><br>
            实例对象中的一个属性：[PromiseStatus] 对应的值有三个值：<br>
            pending 未决定值 <br>
            resolve/fullfilled  成功 <br>
            reject 失败<br>
            <p>状态只能改变一次，由pending→resolve 或者 pending→reject</p>
            <h3>##promise对象的值</h3>
            <p>实例对象中的另一个属性 [PromiseResult]，保存着异步任务[成功/失败]的值</p>
            <p>resolve和reject</p>
            <h3>**promise的基本流程</h3>
            <img src="../assets/promise流程.png" alt="promise流程">
        </div>
    </div>
</template>

<script>
export default {
    name:'promise1',
    data(){
        return{

        }
    },
    methods:{
        rand(m,n){
            return Math.ceil(Math.random()*(n-m+1))+ m-1;
        },
        chouJiang(){
            setTimeout(()=>{
                let n= this.rand(1,100)
                if(n<=30){
                    alert('恭喜中奖')
                }else{
                    alert('再接再厉')
                }
            },1000)
        },
        /**抽奖用promise实现
         * resolve解决  函数类型的数据
         * reject 拒绝  函数类型的数据
         */
        promise_chouJiang(){
            const p = new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    let n= this.rand(1,100)
                    if( n<=30 ){
                        resolve(n);  //将promise状态设置为成功
                    }else{
                        reject(n); //将promise状态设置为失败
                    }
                },1000)
            });
            p.then((value)=>{
                alert('恭喜中奖,您的中将数字为：' + value);
            },(reason)=>{
                alert('再接再厉,您的号码为' + reason);
            });
        },
        
        sendAjax(){
            const xhr = new XMLHttpRequest();
            xhr.open('GET','https://api.apiopen.top/getJoke');
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        console.log(xhr.response);
                    }else{
                        console.log(xhr.status)
                    }
                }
            }
        },
        // 使用promise来实现发送ajax请求
        sendAjax_promise(){
            const p = new Promise((resolve,reject)=>{
                const xhr = new XMLHttpRequest();
                xhr.open('GET','https://api.apiopen.top/getJoke');
                xhr.send();
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){
                        if(xhr.status >= 200 && xhr.status < 300){
                            resolve(xhr.response)
                        }else{
                            reject(xhr.status)
                        }
                    }
                }
            })
            p.then((value)=>{
                console.log(value)
            },(reason)=>{
                console.warn(reason)
            })

        }
    }
}
</script>

<style scoped>
*{
    text-align: left;
}
</style>